<template>
  <transition name="bounce">
  <div id="left" v-if="$store.state.leftmenuShow">

    <div id="top">
      <p class="title text-center color-white">CET-4</p>
      <p class="text-size-md color-white text-center">四级单词记忆管理</p>
    </div>

    <div id="bottom" @click.self="leftMenuClose">

    </div>
  </div>
  </transition>
</template>

<script>
export default{
  name:'leftmenu',
  methods:{
    leftMenuClose:function(event){
      this.$store.state.leftmenuShow = false;
      console.log(this.$store.state.leftmenuShow === false)
    }
  },
  computed:{
    show:function(){
      let menu = this.$store.state.leftmenuShow;
      if(menu == true){
        return true;
      }
      return false;
    }
  }

}
</script>

<style scoped lang="less">
  @import '../assets/css/variables.less';
  .bounce-enter-active {
    animation: bounce-in 1s;
  }
  .bounce-leave-active {
    animation: bounce-in 1s reverse;
  }
  @keyframes bounce-in {
    0% {
      left: -100%;
    }
    100% {
      left:0;
    }
  }
  #left{
    width:100%;
    height:100%;
    position:fixed;
    z-index: 1000;
    left:0;
    top:0;
  }
  #bottom{
    width:100%;
    height:100%;
    background:@gray-dark;
    opacity: .2;
  }
  #top{
    position: absolute;
    z-index:100;
    padding:20px 10px;
    width:65%;
    height:100%;
    background:@black;
    /*opacity: 1;*/
  }
  #top .title{
    height:40px;
    line-height:40px;
    font-size: 300%;
    /*color:@black;*/
  }
</style>
